<template>
	<div class="padding">
		<div class="new">
			<div class="title">评论 {{ total }}</div>
			<text-switch
				@switchFunction="switchChangeFun"
				:switchType="'text'"
				:highColor="'#fff'"
				:defaultValue="switchDefaultValue"
				:switchList="[
					{ title: '默认', value: 0 },
					{ title: '最新', value: 1 },
				]"
				:itemIndex="0"
			></text-switch>
		</div>
		<div class="item" v-for="(item, index) in list" :key="index" @click="onShowReply(item)">
			<div class="header">
				<image class="image" :src="item.avatar" mode="aspectFill"></image>
				<div class="info">
					<div class="name">
						{{ item.nickName }}
					</div>
					<div class="time">
						{{ item.commentTime }}
						<div class="btn">
							<div class="kudos" :class="item.isJump ? 'check' : ''" @click.stop="favorite(item)">
								<!-- {{ item.thumbsUpNum }} -->
								<div :class="item.isJump ? 'img-box-check' : ''">
									<uni-icons
										:type="item.isThumbsUp ? 'hand-up-filled' : 'hand-up'"
										:style="{ color: item.isThumbsUp ? '#fe970f' : '' }"
										size="20"
									></uni-icons>
								</div>
							</div>
							<div class="del" @click.stop="deleteComment(item)">
								<uni-icons type="trash" size="20" color="#acacac"></uni-icons>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="message">{{ item.content }}</div>
			<div class="reply">
				<div class="reply-item" v-if="item.children">
					<span class="label">{{ item.children[0].nickName }}:</span>
					{{ item.children.length ? item.children[0].content : "" }}
				</div>
			</div>
			<div class="unfold" v-if="item.children && item.children.length > 1">查看更多</div>
		</div>

		<comments-details ref="commentsDetailsRef"></comments-details>

		<div class="send">
			<input v-model="sendMessage" placeholder="说点什么吧..." />
			<!-- <image class="icon" src="/static/image/smile.png"></image> -->
			<div
				class="span"
				:class="[
					{
						primary: !!sendMessage,
					},
				]"
				@click="sendFn"
			>
				发送
			</div>
		</div>
	</div>
</template>

<script>
import mixins from "@/mixins"
import commentsDetails from "./comments-details.vue"
import textSwitch from "@/components/text-switch/index.vue"

export default {
	name: "learm-comments",
	mixins: [mixins],
	props: {
		message: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			list: [],
			page: 1,
			total: 0,
			sendMessage: "",
			switchDefaultValue: 0,
			sortFlag: "",
		}
	},
	computed: {},
	created() {
		this.list = []
		this.page = 1
		this.total = 0
		this.getList()
	},
	methods: {
		//切换事件
		switchChangeFun(e) {
			if (e.swithcSelectItem.value == 1) {
				// 最新
				this.sortFlag = "00"
				this.list = []
				this.getList()
			} else {
				// 默认
				this.sortFlag = ""
				this.list = []
				this.getList()
			}
			this.switchDefaultValue = e.swithcSelectItem.value
		},
		// property是你需要排序传入的key,bol为true时是升序，false为降序
		switchTab(property, bol) {
			return function (a, b) {
				var value1 = a[property]
				var value2 = b[property]
				if (bol) {
					// 升序
					return Date.parse(value1) - Date.parse(value2)
				} else {
					// 降序
					return Date.parse(value2) - Date.parse(value1)
				}
			}
		},

		onShowReply(item) {
			this.$refs.commentsDetailsRef.show(item, content => {
				if (item.children) {
					item.children.push(content)
				} else {
					item.children = [content]
				}
			})
		},

		async getList() {
			const data = await this.$axios.get("/api/member/memberComment/page", {
				commentType: "00",
				parentId: this.message.id,
				current: this.page,
				size: 10,
				sortFlag: this.sortFlag,
			})
			this.list = this.list.concat(data.records)
			this.total = data.total
			this.list.forEach(item => {
				item.isJump = false
			})
		},

		onScrollBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			}
		},
		async sendFn() {
			if (!this.sendMessage) {
				return
			}
			try {
				const res = await this.$axios.post("/api/member/memberComment/save", {
					commentType: "00",
					isAnonymity: "2", // 是否匿名
					targetId: "", // 评论主体id 回复评论的时候用 不传表示是评论课程
					parentId: this.message.id, // 评论的上级 targetId不传时这个传课程的id
					content: this.sendMessage,
				})

				this.total++
				this.list.push({
					nickName: this.$store.state.user.userInfo.nickName,
					commentTime: this.getCurrentTime(),
					thumbsUpNum: 0,
					isThumbsUp: false,
					content: this.sendMessage,
					id: res.id,
					parentId: res.parentId,
					avatar: res.avatar || this.$store.state.user.userInfo.avatar,
					memberId: this.$store.state.user.userInfo.id,
				})
				this.sendMessage = ""
				this.switchChangeFun({ swithcSelectItem: { value: this.switchDefaultValue } })
			} catch (error) {
				uni.showToast({
					title: error,
					icon: "none",
					duration: 2000,
				})
			}
		},
		getCurrentTime() {
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let hour = date.getHours()
			let minutes = date.getMinutes()
			let seconds = date.getSeconds()
			// 给一位数的数据前面加 “0”
			if (month >= 1 && month <= 9) {
				month = "0" + month
			}
			if (day >= 0 && day <= 9) {
				day = "0" + day
			}
			if (hour >= 0 && hour <= 9) {
				hour = "0" + hour
			}
			if (minutes >= 0 && minutes <= 9) {
				minutes = "0" + minutes
			}
			if (seconds >= 0 && seconds <= 9) {
				seconds = "0" + seconds
			}
			return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
		},
		favorite(item) {
			if (!item.id) return

			if (item.isThumbsUp) {
				item.isJump = false
				try {
					this.$axios.post("/api/member/memberThumbsUp/cancel", {
						targetId: item.id,
						type: "00",
					})
					this.showMessage.success("取消成功")
				} catch (error) {
					this.showMessage.fail(error)
				}
			} else {
				item.isJump = true
				try {
					this.$axios.post("/api/member/memberThumbsUp/save", {
						targetId: item.id,
						type: "00",
					})
					this.showMessage.success("点赞成功")
				} catch (error) {
					this.showMessage.fail(error)
				}
			}
			item.isThumbsUp = !item.isThumbsUp
			// this.getList()
		},
		async deleteComment(item) {
			if (item.memberId == this.$store.state.user.userInfo.id) {
				uni.showModal({
					title: "提示",
					content: "确定要删除评论吗？",
					success: async res => {
						if (res.confirm) {
							try {
								await this.$axios.post("/api/member/memberComment/deleteById?id=" + item.id)
								let index = this.list.findIndex(item1 => item1.id == item.id)
								this.list.splice(index, 1)
							} catch (error) {
								console.log(error)
							}
						} else if (res.cancel) {
						}
					},
				})
			} else {
				uni.showToast({
					title: "只能删除自己的评论",
					icon: "none",
				})
			}
		},
		del() {
			this.list = []
			this.getList()
		},
	},
	components: {
		commentsDetails,
		"text-switch": textSwitch,
	},
}
</script>

<style lang="scss" scoped>
@import "./details.scss";
.new {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item {
	margin-bottom: 30rpx;
	.header {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.image {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			display: block;
			margin-right: 15rpx;
			flex: none;
		}
		.info {
			flex: 1;
			.name {
				font-size: 24rpx;
				padding-top: 7rpx;
				padding-bottom: 7rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.delete {
					margin-left: auto;
				}
			}
			.time {
				color: #acacac;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btn {
					display: flex;
					gap: 10rpx;

					.kudos {
						border-radius: 50%;
						padding: 4rpx;
						// margin-left: auto;
						.icon {
							width: 28rpx;
							height: 26rpx;
							margin-left: 5rpx;
						}
					}
					.check {
						animation: shade 0.5s;
						transition: all 0.5s;
					}
					.img-box-check {
						animation: kudos 0.5s;
						-moz-animation: kudos 0.5s;
						-webkit-animation: kudos 0.5s;
						-o-animation: kudos 0.5s;
					}
					@keyframes kudos {
						0% {
							transform: scale(0);
							-webkit-transform: scale(0);
							-moz-transform: scale(0);
						}
						50% {
							transform: scale(1.3);
							-webkit-transform: scale(1.3);
							-moz-transform: scale(1.3);
						}
						100% {
							transform: scale(1);
							-webkit-transform: scale(1);
							-moz-transform: scale(1);
						}
					}
					@keyframes shade {
						0% {
							transform: scale(0);
							-webkit-transform: scale(0);
							-moz-transform: scale(0);
							box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0);
						}
						50% {
							transform: scale(1.3);
							-webkit-transform: scale(1.3);
							-moz-transform: scale(1.3);
							box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0.1);
						}
						100% {
							transform: scale(1);
							-webkit-transform: scale(1);
							-moz-transform: scale(1);
							box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0);
						}
					}
				}
			}
		}
	}

	.message {
		padding-left: 100rpx;
		color: #454545;
		font-size: 28rpx;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		word-break: break-all;
	}
	.reply {
		padding-bottom: 26rpx;
		position: relative;
		// border-bottom: 1px solid #f5f5f5;
		margin-left: 100rpx;
		color: #454545;
		padding-left: 22rpx;
		font-size: 28rpx;
		// &::before {
		// 	content: "";
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	width: 4rpx;
		// 	height: 50rpx;
		// 	background: #f9f9f9;
		// }
		.reply-item {
			word-break: break-all;
		}
		.label {
			color: $primary;
			margin-right: 10rpx;
		}
		.reply-text {
			word-break: break-word;
		}
	}
	.unfold {
		color: #a2a1a2;
		font-size: 26rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		&::after {
			content: "";
			display: inline-block;
			width: 1em;
			height: 1em;
			border-bottom: 1px solid #a2a1a2;
			border-left: 1px solid #a2a1a2;
			transform: rotate(225deg) scale(0.5);
		}
	}
}

.send {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 112rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f1f1f1;
	padding: 0 30rpx;
	.icon {
		width: 43rpx;
		height: 43rpx;
		margin-right: 10rpx;
	}
	.span {
		color: #cbcbcb;
		&.primary {
			color: #3c9cff;
		}
	}
	input {
		flex: 1;
	}
}
</style>
